<template>
  <view class="truck-content">
    <scroll-view class="scroll" scroll-y>
      <view class="felxcontent image" v-for="item in truck.picture" :key="item">
        <image :src="item" mode="scaleToFill" />
      </view>

      <uni-card>
        <view class="carditem" v-for="(value, key) in dataEnum" :key="key">
          <text>{{ value }}</text>
          <text class="item">{{ truck[key] }}</text>
        </view>
      </uni-card>
    </scroll-view>
  </view>
</template>

<script>
import { getTruckAPI } from "@/api/user";

export default {
  name: "UniAppTruck",

  data() {
    return {
      truck: {},
      data: {},
      dataEnum: {
        allowableLoad: "载重",
        id: "车牌编号",
        licensePlate: "车牌号码",
        truckType: "车型",
      },
    };
  },

  async onLoad() {
    const { data } = await getTruckAPI();
    // for (const key in dataEnum) {
    //     if(key==='picture')continue
    //     dataEnum[key][item]=data[key]
    // }
    // this.
    // console.log(dataEnum);
    this.truck = data;
    this.truck.allowableLoad = (+data.allowableLoad).toFixed(0) / 10 + "吨";
    this.truck.picture = data.picture.split(",");
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.felxcontent {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.truck-content {
  width: 100vw;
  background-color: #f4f4f4;
  height: 99vh;

  .scroll {
    width: 90vw;
    margin-bottom: 10px;
    height: 90vh;
    margin: 0 auto;

    padding-bottom: 10px;
    padding-top: 10px;

    .image {
      width: 100%;
      height: 200px;
      border-radius: 8px;
      // background-color: rgba(153, 153, 153, 0.107);

      image {
        border: 1px solid #9999994a;
        border-radius: 8px;
        margin: 5px 0;
      }
    }

    .carditem {
      display: flex;
      justify-content: space-between;

      .item {
        color: #000;
      }
    }
  }
}
</style>
